<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现京东放大镜效果</title>
    <script>
        window.addEventListener('load', function () {
            let zoom = document.querySelector('.zoom')
            let small = document.querySelector('.small')
            let big = document.querySelector('.big')
            let bigImg = document.querySelector('.big img')
            small.addEventListener("mouseover", function () {
                zoom.style.display = "block"
                big.style.display = "block"
            })
            small.addEventListener('mousemove', (e) => {
                let x = e.pageX - small.offsetLeft
                let y = e.pageY - small.offsetTop
                let halfWeight = zoom.offsetWidth / 2
                let zoomX = x - halfWeight
                let zoomY = y - halfWeight
                let maxWidth = small.offsetWidth - zoom.offsetWidth
                if (zoomX <= 0) {
                    zoomX = 0
                }
                else if (zoomX >= maxWidth) {
                    zoomX = maxWidth
                }
                if (zoomY <= 0) {
                    zoomY = 0
                }
                else if (zoomY >= maxWidth) {
                    zoomY = maxWidth
                }
                zoom.style.left = zoomX + 'px'
                zoom.style.top = zoomY + 'px'
                let maxBigWidth = bigImg.offsetWidth - big.offsetWidth
                bigX = zoomX * maxBigWidth / maxWidth 
                bigY = zoomY * maxBigWidth / maxWidth 
                bigImg.style.left = bigX +'px'
                bigImg.style.top = bigY + 'px'

            })
            small.addEventListener('mouseout', () => {
                zoom.style.display = "none"
                big.style.display = "none"
            })
        })
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .small {
            position: relative;
            width: 350px;
            height: 350px;
        }

        .big {
            position: relative;
            z-index: 999;
            top: -350px;
            left: 350px;
            width: 1000px;
            height: 1000px;
            display: none;
            overflow:hidden;
        }
        .big img{
            width: 800px;
            position:absolute;
            top:0;
            left:0;
        }
        .zoom {
            top: 0;
            left: 0;
            position: absolute;
            width: 200px;
            height: 200px;
            display: none;
            background-color: #FFEFA7;
            opacity: .3;
            cursor: move;
        }
    </style>
</head>

<body>
    <div class="small">
        <img src="img/small.jpg" alt="">
        <div class="zoom"></div>
    </div>
    <div class="big">
        <img src="img/big.jpg" alt="">
    </div>
</body>

</html>